<template>
  <div id="app">
    <h2>{{cs}}天气查查查</h2>
    <input type="text" placeholder="请输入查询的城市" v-model="cs" @keyup.enter="djcx"/>
    <button @click="djcx">点击查询</button>
    <div>
      <p v-for="(item,index) in sz" :key="'tq'+index">
        <!-- 今天 晴 高温30度 低温11度 -->
        {{item.ymd+cs+item.date + item.high + item.low + item.type }}
        <span v-if="item.type.indexOf('雨')!=-1">🌧️</span>
        <span v-else-if="item.type.indexOf('云')!=-1">🌥️</span>
        <span v-else>🌞</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {tianqijiekou} from "../http/api.js"
let cs=ref('')
let sz=ref([])
const djcx=async()=>{
    if(cs.value==''){
        return
    }
    let sj=await tianqijiekou(cs.value)
    sz.value = sj.data.data.forecast;
    console.log(sj.data.data.forecast)
}

</script>

<style scoped>
#weather-list {
  text-align: center;
  margin-top: 20vh;
}
input {
  border: 1px solid #333;
}
button {
  padding: 4px 10px;
  cursor: pointer;
}
div {
  width: 400px;
  margin: 20px auto;
  text-align: left;
  padding-left: 20px;
}
</style>